<template>
  <div class="kouqiamg">
    <div class="picture">
      <a data-v-507da662="" href="https://mall.ikang.com/special/110"
        ><img
          data-v-507da662=""
          data-default="https://static-newmall.health.ikang.com/img/Pic_ProductDefualt@2x.0560f5be.png"
          src="https://static-upyunmall.health.ikang.com/image/banner/20200721/e054502957184bff821d34d72f434395.jpg!/format/webp"
      /></a>
    </div>
    <div class="kong">
      <router-link
        to="/kouqiang/kqmoren"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">默认</NavLink>
      </router-link>
      <router-link
        to="/kouqiang/kqxiaoliang"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">销量</NavLink>
      </router-link>
      <router-link
        to="/kouqiang/kqjiage"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <NavLink :isActive="isActive" @click.native="navigate">价格</NavLink>
      </router-link>
      <div>
        <div class="sx">
          <van-cell @click="showPopup">筛选</van-cell>
          <van-popup
            v-model="show"
            position="right"
            :style="{ height: '100%', width: '80%' }"
            overlay
            closeable
            close-icon-position="top-right"
          >
            <div class="right">
              <p>分类</p>
              <ul>
                <li
                  v-for="todo in todos"
                  :class="[selectLi == index ? 'active' : '']"
                >
                  {{ todo.text }}
                </li>
              </ul>
            </div>
            <div class="right">
              <p>品牌</p>
              <ul>
                <li v-for="list in lists">{{ list.text }}</li>
              </ul>
            </div>
            <div id="tc-1">
              <button class="bt">重置</button>
              <button class="bt">确认</button>
            </div>
          </van-popup>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { cell } from "vant";
Vue.use(Popup);
Vue.use(cell);

import NavLink from "../../../components/NavLink.vue";
export default {
  components: {
    NavLink,
  },
  data() {
    return {
      show: false,
      selectLi: "",
      index: "",
      todos: [
        { text: "入职体验" },
        { text: "君安高端" },
        { text: "VIP体验" },
        { text: "中老年体验" },
        { text: "男性/女性" },
        { text: "婚检/备孕" },
        { text: "AI慢病筛查" },
        { text: "肿瘤筛查" },
        { text: "中青年体检" },
      ],
      lists: [
        { text: "不限" },
        { text: "爱康国宾" },
        { text: "爱康君安" },
        { text: "爱康卓悦" },
      ],
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang='stylus'>
.kouqiamg {
  height: 100%;
  overflow-y: scroll;


  img {
    vertical-align: middle;
    width: 100%;
    height: 1.5rem;
  }
}

.picture {
  width: 3.45rem;
  height: 1.5rem;
  margin: 0 0.15rem 0 0.15rem;
}

.kong {
  display: flex;
  justify-content: left;
  height: 0.48rem;
}

.kong > div {
  // flex-direction: row
  // align-items:flex-start
  height: 0.48rem;
  width: 0.94rem;
  line-height: 0.48rem;
  text-align: center;
  font-size: 16px;

  .sx {
    line-height: 0.44rem;
  }

  .right {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      li {
        width: 0.84rem;
        height: 0.36rem;
        line-height: 0.36rem;
        font-size: 0.12rem;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 0.05333rem;
        background-color: #f5f5f5;
        margin-top: 0.1rem;
        box-sizing: border-box;
        text-align: center;
        color: #333;
        padding: 0 0.18667rem;

        .active {
          background: #fd7522;
          border: 1px solid #fd7522;
          color: #fff;
        }
      }
    }

    button {
      outline: none;
      border: none;
    }
  }
}

#tc-1 {
  width: 100%;
  height: 0.5rem;
  margin-top: 0.04rem;
  position: absolute;
  bottom: 0;

  .bt {
    height: 0.5rem;
    outline: none;
    border: none;

    &:nth-child(1) {
      background-color: #ffffff;
      color: #333333;
      font-size: 0.16rem;
      width: 30%;
    }

    &:nth-child(2) {
      background-color: #ff6732;
      font-size: 0.16rem;
      color: #FFFFFF;
      width: 70%;
    }
  }
}
</style>
<style lang='stylus'>
.van-cell {
  line-height: 33px;
  font-size: 16px;
}
</style>